<template>
  <div>
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span @click="collapsePannel" class="btn">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <div v-show="isShow" class="container">
      <slot :row="obj"> {{ obj.name }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "VueComponentsPannel",

  data() {
    return {
      obj: {
        name: "康",
        ige: "有为是勺",
      },
      isShow: false,
    };
  },

  methods: {
    collapsePannel() {
      // 改变 isShow 的状态
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style lang="less" scoped>
// scoped 原理:
// 1. 当前组件所有的标签加 data-v-hash
// 2. 当前组件所有的 css 选择器加 属性选择器 [data-v-hash]
h3 {
  color: red;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}
.title h4 {
  line-height: 2;
  margin: 0;
}
.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}
.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}
</style>